<template>
  <a :href="'/pages/jobinfo/main?id='+jobInfo.id" class="job-component">
      <div class="item-left">
        <image :src="jobInfo.thumb"> </image>
      </div>
      <div class="item-right">
        <div class="com-name">
          <div class="normaltext com-name-left">
            {{jobInfo.title}}
          </div>
          <div class="jobtype">
            <image src="../../static/jobtype.png" />
            <div>{{jobInfo.catename}}</div>
          </div>
          <!--<image></image>-->
        </div>
        <div class="line"></div>
        <div class="com-ask smalltext">
          要求:{{jobInfo.description}}
        </div>
        <div class="com-money normaltext">
          <p>薪资:{{jobInfo.xinzi}}</p>
          <p class="com-location">{{jobInfo.dizhi}}</p>
        </div>
      </div>
  </a>
</template>
<script>
  export default {
    props:['jobInfo'],
    methods:{
      go(url){
        wx.navigateTo({
          url:url,
          fail(err){
            console.log(err);
          }
        })
      }
    },
    mounted(){
    }
  }
</script>
<style scoped>

.job-component{
  width: 100%;
  background: #fff;
  display: flex;
  margin-top: 15rpx;
  padding:  5rpx;
}
.job-component .item-left,.com-list .job-component .item-right{
  display: flex;
}
.job-component .item-left{
  font-size: 0;
  height: 218rpx;
}
.job-component .item-right{
  flex-direction: column;
  flex: 1;
  align-content: space-around;
  padding: 0 10rpx;
}
.job-component .item-left image{
  display: block;
  width: 286rpx;
  height: 218rpx;
  vertical-align: middle;
}
.job-component .item-right .com-name{
  display: flex;
  flex-direction:row;
  justify-content: space-between;
  line-height: 40rpx;
  margin-top: 5rpx;
  height: 80rpx;
  display: -webkit-box ;

}

.com-name .com-name-left{
  width: 355rpx;
  height: 80rpx;

  display: -webkit-box ;

  overflow: hidden;

  text-overflow: ellipsis;

  word-break: break-all;

  -webkit-box-orient: vertical;

  -webkit-line-clamp:2;
}
.job-component .jobtype{
  width: 76rpx;
  font-size: 20rpx;
  color: #fff;
  position: relative;
}
.job-component .jobtype div{
  position: absolute;
  width: 66rpx;
  top: 10rpx;
  left: 9rpx;
  text-align: center;
}
.job-component .jobtype image{
  width: 76rpx;
  height: 72rpx;
}
.job-component .item-right .line{
  width: 100%;
  /*margin-top: 30rpx;*/
}
.job-component .com-money,.com-list .com-ask{
  color: #F43F45;
}
.job-component .com-ask{
  margin-top: 16rpx;
  line-height: 40rpx;
  width: 428rpx;
  height: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-component .com-money{
  display: flex;
  flex-direction: row;
  margin-top: 9rpx;
  line-height: 34px;
  vertical-align: bottom;
  justify-content: space-between;
  /*margin-top: 30rpx;*/
}
.job-component .com-location{
  color: #000;
}
</style>
